<!--
 * @Author: lmk
 * @Date: 2022-04-16 11:45:04
 * @LastEditTime: 2022-06-29 16:26:28
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="grid grid-cols-4 gap-4 musicList">
    <music v-for="(item,index) in musicList" :key="index" :music="item"></music>
  </div>
</template>

<script>
import music from '../musicItem'
export default {
  components: {
    music
  },
  props: {
    musicList: {
      type: Array,
      default: () => []
    }
  },
}
</script>

<style lang="scss" scpoed>
@media screen and (min-width: 1400px) {
  .musicList{
    margin-top: 50px;
  }
}
// @media screen and (max-width: 1401px) {
//   .musicList{
//     // display: flex;
//     // flex-direction: column;
//   }
// }
</style>